<template>
  <div id="homs">
    <div class="wrap">
			<div class="registerContent">
				<div class="l_header_bg"></div>
				<div class="l_cont">
					<div class="home_cont">
						<div class="home_top">
							<div class="home_top_left">
								<div class="top_left_cont">
									<div class="left_cont_li">
										<div class="top_left_li_title">主体信息</div>
										<div class="top_left_li_canvas">
											<div class="circleChart" id="Eone" style="width:142px;height:140px"></div>
										</div>
										<!--<div class="top_left_li_text"><span class="isOverdue_con">部分功能无法使用，请尽快提交体验。</span></div>-->
										<div class="top_left_li_btn isOverdue_btn isOverdue_btn1">
											<a @click="goUserPay">立即认证</a>
										</div>
									</div>
									<div class="left_cont_li">
										<div class="top_left_li_title">在线确权次数</div>
										<div class="top_left_li_canvas">
											<div class="circleChart" id="Etwo" style="width:142px;height:140px"></div>
										</div>
										<!--<div class="top_left_li_text"><span>余额较少</span></div>-->
										<div class="top_left_li_btn isOverdue_btn2">充值</div>
									</div>
									<div class="left_cont_li">
										<div class="top_left_li_title">存储空间</div>
										<div class="top_left_li_canvas">
											<div class="circleChart" id="Ethree" style="width:142px;height:140px"></div>
										</div>
										<!--<div class="top_left_li_text"><span>余额充足</span></div>-->
										<div class="top_left_li_btn isOverdue_btn3">充值</div>
									</div>
									<div class="left_cont_li">
										<div class="top_left_li_title">法务咨询次数</div>
										<div class="top_left_li_canvas">
											<div class="circleChart" id="Efou" style="width:142px;height:140px"></div>
										</div>
										<!--<div class="top_left_li_text"><span>余额充足</span></div>-->
										<div class="top_left_li_btn isOverdue_btn4">充值</div>
									</div>
								</div>
							</div>
							<div class="home_top_right">
								<div class="top_right_title">
									<span>快捷入口</span>
									<span class="kuaijie"></span>
								</div>
								<div class="top_right_c">
									<div class="home_top_right_text">
										<p style="background: white;color: black">您还没有设置快捷入口赶紧点击添加一个吧~</p>
										<p style="background: #6081ff;color: white" class="kuaijie" @click="AddEnter">添加快捷入口</p>
									</div>
								</div>
							</div>
						</div>
						<div class="home_bottom">
							<div class="home_bottom_left">
								<div class="home_bottom_title">
									<span>系统近期消息</span>
									<span>
										<a @click="ArticList(1)">更多 ></a>
									</span>
								</div>
								<div class="bottom_left_cont bottom_left_cont1">
                  <div class="bottom_left_li">
                     <a @click="GoArticl(456)">
                      <span>1</span>.<span class="bottom_left_li_text"><span 
                      style="position:relative;display:inline-block;width:90%;padding-left: 30px">
                        如何使用鲸版权<em></em>
                        </span></span>
                        <span>2018/11/08 16:20:19</span>
                     </a>
                    </div>
								</div>
							</div>
							<div class="home_bottom_right">
								<div class="home_bottom_title">
									<span>版权典型案例及问题解答</span>
									<span>
										<a @click="ArticList(2)">更多 ></a>
									</span>
								</div>
								<div class="bottom_right_cont bottom_right_cont2">
									<div class="bottom_right_li">
                    <div class="bottom_right_li">
                      <a  @click="GoArticl(456)">
                      <span>1</span>.<span class="bottom_right_li_text"><span
                      style="position:relative;display:inline-block;width:90%;padding-left: 30px"
                      >生活中常见的侵权行为<em></em></span></span><span>2018/11/09 09:37:07</span>
                      </a>
                    </div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
  </div>
</template>

<script>
export default {
  props: {
    msg: String
  },
  data() {
    return {
      FourStatus: {
        o: 2,
        p: 55,
        t: 235130,
        s: 23
      },
      List: ["未认证", "已认证", "即将过期"]
    };
  },
  components: {},

  beforeMount: function() {},
  mounted: function() {
    //初始化首页
    this.ens = true;
    // 18458160876
    // this.$http
    //   .get("/apis/home?id=456")
    //   .then(data => {
    //     console.log(data.data);
    //   })
    //   .catch(err => {
    //     console.log(err);
    //   });
    this.InitEcharts();
  },
  methods: {
    InitEcharts() {
      let OneEcharts = this.$echarts.init(document.getElementById("Eone"));
      let TwoEcharts = this.$echarts.init(document.getElementById("Etwo"));
      let ThreeEcharts = this.$echarts.init(document.getElementById("Ethree"));
      let EourEcharts = this.$echarts.init(document.getElementById("Efou"));
      let optionOen = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          show: false
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            hoverAnimation: false,
            color: "rgb(151, 186, 255)",
            radius: ["78%", "100%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                // show: false,
                position: "center",
                textStyle: {
                  fontSize: "18",
                  color: "rgb(151, 186, 255)",
                  fontWeight: "normal"
                }
              }
            },

            data: [{ value: 335, name: this.List[this.FourStatus.o] }]
          }
        ]
      };
      let optionTwo = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          show: false
        },
        series: [
          {
            name: "在线确权",
            type: "pie",
            hoverAnimation: false,
            color: "rgb(151, 186, 255)",
            radius: ["78%", "100%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                // show: false,
                position: "center",
                textStyle: {
                  fontSize: "18",
                  color: "#212121",
                  fontWeight: "normal"
                }
              }
            },

            data: [{ value: 335, name: `${this.FourStatus.p}次` }]
          }
        ]
      };
      let optionThree = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          show: false
        },
        series: [
          {
            name: "储存空间",
            type: "pie",
            hoverAnimation: false,
            color: "rgb(151, 186, 255)",
            radius: ["78%", "100%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                // show: false,
                position: "center",
                textStyle: {
                  fontSize: "18",
                  color: "#212121",
                  fontWeight: "normal"
                }
              }
            },

            data: [{ value: 335, name: `${this.FourStatus.t}M` }]
          }
        ]
      };
      let optionFour = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          show: false
        },
        series: [
          {
            name: "法务咨询",
            type: "pie",
            hoverAnimation: false,
            color: "rgb(151, 186, 255)",
            radius: ["78%", "100%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                // show: false,
                position: "center",
                textStyle: {
                  fontSize: "18",
                  color: "#212121",
                  fontWeight: "normal"
                },
                shadowBlur: 200,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },

            data: [{ value: 335, name: `${this.FourStatus.s}次` }]
          }
        ]
      };
      OneEcharts.setOption(optionOen);
      TwoEcharts.setOption(optionTwo);
      ThreeEcharts.setOption(optionThree);
      EourEcharts.setOption(optionFour);
    },
    //
    GoArticl(id) {
      this.$router.push({
        path: `/Articl/${id}`
      });
    },
    //
    ArticList(type) {
      this.$router.push({
        path: `/ArticList/${type}`
      });
    },
    //
    AddEnter() {
      this.$router.push({
        path: `/ENTER`
      });
    },
    goUserPay() {
      this.$store.commit("SET_I", 0);
      this.$router.push({
        path: `/UserInfo/UserBase`,
        query: {
          type: 0
        }
      });
    }
  }
};
</script>

<style scoped>
@import "home.css";
#homs {
  width: 100%;
  min-width: 1400px;
}
#bg {
  background-image: url("./../../assets/imgs/search.png");
  background-size: 100% 100%;
}
a {
  color: white;
}
a:focus {
  text-decoration: none;
}
</style>
